import React, {useEffect, useState} from 'react'
import {Form, Button, message, Popconfirm, Modal, Select, Row, Col, Input, DatePicker, Table} from 'antd'
import {connect} from 'umi'
import {SearchOutlined} from '@ant-design/icons';
import SelectUserModal from "@/pages/components/SelectUserModal";
import {findSalaryDistributionByOid} from '../../service';

const FormItem = Form.Item;

const formLayout = {
  labelCol: {span: 7},
};

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const LogoutSalaryGroup = (props) => {
  const {onSubmit, onCancel, visible} = props;
  const [userModalVisible, setUserModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [userInfo, setUserInfo] = useState(null);
  const [data, setData] = useState([]);


  const columns = [
    {
      title: '薪资组',
      dataIndex: 'salaryGroupName',
      align: 'center',
      render: (text, record) => {
        return record.salaryGroupDto && record.salaryGroupDto.cname
      }
    },
    {title: '发薪单位',
      dataIndex: 'salaryPayrollUnitName',
      align: 'center',
      render: (text, record) => {
        return record.salaryPayrollUnitDto && record.salaryPayrollUnitDto.cname
      }
    }
  ];

  const confirmSelectUser = (info) => {
    if (info.length !== 0) {
      let needsUserInfo = {
        name: info[0].name,
        orgname: info[0].orgname,
        unitname: info[0].unitname,
        jobname: info[0].jobname,
        oid: info[0].oid,
      };
      findSalaryDistributionByOid(needsUserInfo.oid).then(res => {
        setData(res.data);
      });
      setUserInfo(needsUserInfo);
      form.setFieldsValue({...needsUserInfo});
      setUserModalVisible(false);
    } else {
      message.error('请选择人员!')
    }
  };

  const showSelectUserModal = () => {
    setUserModalVisible(true);
  };

  const cancelSelectUser = () => {
    setUserModalVisible(false);
  };

  const onFormCancel = () => {
    form.resetFields();
    setUserInfo(null);
    setData([]);
    onCancel()
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    if(data.length > 0){
      let temp = data[0];
      onSubmit({
        ...fieldsValue,
        oid:userInfo.oid,
        salaryGroupId:temp.salaryGroupDto.coidGroup,
        payrollUnitId:temp.salaryPayrollUnitDto.coidOrgunit,

      });
    }
    setData([]);
    setUserInfo(null);
  };

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <>
            <Col {...colStyle}>
              <FormItem name="name" label="姓名" rules={[{required: true, message: '姓名不能为空'}]}>
                <Input.Group compact size="large">
                  <Input style={{width: '80%', height: '32px', fontSize: '14px', background: '#ffffff'}}
                         placeholder="选择员工" value={userInfo ? userInfo.name : ''} disabled={true}/>
                  <Button style={{width: '20%'}} icon={<SearchOutlined/>} onClick={() => showSelectUserModal()}/>
                </Input.Group>
              </FormItem>
            </Col>
            <Col {...colStyle}>
              <FormItem name="orgname" label="所属公司">
                <Input disabled={true}/>
              </FormItem>
            </Col>
            <Col {...colStyle}>
              <FormItem name="unitname" label="所属部门">
                <Input disabled={true}/>
              </FormItem>
            </Col>
            <Col {...colStyle}>
              <FormItem name="jobname" label="任职岗位">
                <Input disabled={true}/>
              </FormItem>
            </Col>
          </>
          <Col {...colStyle}>
            <FormItem name="distributionTime" label="注销日期" rules={[{required: true, message: '请选择注销日期！'}]}>
              <DatePicker placeholder="请选择注销日期" style={{width: '100%'}}/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Popconfirm title={`是否确认该注销操作?`}
                    onConfirm={handleSubmit}
                    okText="是"
                    cancelText="否">
          <Button type="primary">提交</Button>
        </Popconfirm>
      </>
    )
  };

  return (
    <Modal
      width={'60%'}
      destroyOnClose
      title="注销薪资组"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>
      <Table
        style={{marginBottom: 24}}
        title={() => '薪资组及发薪单位信息'}
        rowKey="id"
        size="small"
        bordered
        pagination={false}
        dataSource={data}
        columns={columns}
      />
      <SelectUserModal
        selectType={0}
        visible={userModalVisible}
        handleOk={confirmSelectUser}
        handleCancel={cancelSelectUser}
      />

    </Modal>
  )
};


export default connect(() => ({}))(LogoutSalaryGroup)
